package com.atom.app.mvi.ui.compose

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.annotation.DrawableRes
import androidx.compose.foundation.*
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.LazyRow
import androidx.compose.foundation.lazy.items
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.*
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.AccountCircle
import androidx.compose.material.icons.filled.Search
import androidx.compose.material.icons.filled.Spa
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.text.font.FontFamily
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import com.atom.app.mvi.R

import androidx.compose.ui.text.font.Font

class ComposeActivity : ComponentActivity() {
    val Yellow800 = Color(0xFFF29F05)
    val Red300 = Color(0xFFEA6D7E)

    val Montserrat = FontFamily(
        Font(R.font.montserrat_light, FontWeight.Light),
        Font(R.font.montserrat_regular, FontWeight.Normal),
        Font(R.font.montserrat_medium, FontWeight.Medium),
        Font(R.font.montserrat_semibold, FontWeight.SemiBold)
    )
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            Surface(modifier = Modifier.fillMaxSize()) {
                ContentView()
            }
        }
    }

    @Preview
    @Composable
    fun PreviewMessageCard() {
        ContentView()
    }

    @Composable
    fun ContentView() {
        Column(modifier = Modifier.fillMaxHeight()
            .verticalScroll(rememberScrollState())) {
            Spacer(modifier = Modifier.height(16.dp))
            SearchBar()
            Spacer(modifier = Modifier.height(16.dp))
            TitleSection("Title1") {
                ListBodyElement(mutableListOf<Action>().apply {
                    this.add(Action("Content1", R.drawable.shape_rectangle_c4d0080ff_r8_r8_r8_r8))
                    this.add(Action("Content2", R.drawable.shape_rectangle_c4d0080ff_r8_r8_r8_r8))
                    this.add(Action("Content2", R.drawable.shape_rectangle_c4d0080ff_r8_r8_r8_r8))
                    this.add(Action("Content2", R.drawable.shape_rectangle_c4d0080ff_r8_r8_r8_r8))
                    this.add(Action("Content2", R.drawable.shape_rectangle_c4d0080ff_r8_r8_r8_r8))
                    this.add(Action("Content2", R.drawable.shape_rectangle_c4d0080ff_r8_r8_r8_r8))
                    this.add(Action("Content2", R.drawable.shape_rectangle_c4d0080ff_r8_r8_r8_r8))
                    this.add(Action("Content2", R.drawable.shape_rectangle_c4d0080ff_r8_r8_r8_r8))
                    this.add(Action("Content2", R.drawable.shape_rectangle_c4d0080ff_r8_r8_r8_r8))
                    this.add(Action("Content2", R.drawable.shape_rectangle_c4d0080ff_r8_r8_r8_r8))
                    this.add(Action("Content3", R.drawable.shape_rectangle_c4d0080ff_r8_r8_r8_r8))
                    this.add(Action("Content4", R.drawable.shape_rectangle_c4d0080ff_r8_r8_r8_r8))
                    this.add(Action("Content5", R.drawable.shape_rectangle_c4d0080ff_r8_r8_r8_r8))
                    this.add(Action("Content6", R.drawable.shape_rectangle_c4d0080ff_r8_r8_r8_r8))
                    this.add(Action("Content7", R.drawable.shape_rectangle_c4d0080ff_r8_r8_r8_r8))
                })
            }
            Spacer(modifier = Modifier.height(16.dp))
            TitleSection("Title2") {
                List(modifier = Modifier
                    .fillMaxWidth().height(1000.dp),
                    messages = mutableListOf<Message>().apply {
                        this.add(Message("123123", "asdasdasd"))
                        this.add(Message("123123", "asdasdasd"))
                        this.add(Message("123123", "asdasdasd"))
                        this.add(Message("123123", "asdasdasd"))
                        this.add(Message("123123", "asdasdasd"))
                        this.add(Message("123123", "asdasdasd"))
                        this.add(Message("123123", "asdasdasd"))
                        this.add(Message("123123", "asdasdasd"))
                        this.add(Message("123123", "asdasdasd"))
                        this.add(Message("123123", "asdasdasd"))
                        this.add(Message("123123", "asdasdasd"))
                        this.add(Message("123123", "asdasdasd"))
                        this.add(Message("123123", "asdasdasd"))
                        this.add(Message("123123", "asdasdasd"))
                    })
            }
            Spacer(modifier = Modifier.height(16.dp))
            NavigationView()
        }
    }

    @Composable
    fun NavigationView(modifier: Modifier = Modifier) {
        BottomNavigation(modifier.fillMaxWidth()) {
            BottomNavigationItem(
                icon = {
                    Icon(
                        imageVector = Icons.Default.Spa,
                        contentDescription = null
                    )
                },
                label = {
                    Text(text = "Home")
                },
                selected = true,
                onClick = {}
            )
            BottomNavigationItem(
                icon = {
                    Icon(
                        imageVector = Icons.Default.AccountCircle,
                        contentDescription = null
                    )
                },
                label = {
                    Text(text = "Profile")
                },
                selected = false,
                onClick = {}
            )
        }
    }

    // 横向的布局内容

    data class Action(val name: String, @DrawableRes val icon: Int)

    @Composable
    fun ListBodyElement(list: List<Action>) {
        LazyRow(
            modifier = Modifier.fillMaxWidth(),
            horizontalArrangement = Arrangement.spacedBy(4.dp),
            contentPadding = PaddingValues(horizontal = 11.dp),
        ) {
            items(list) {
                AlignYourBodyElement(it.name)
            }
        }
    }

    @Composable
    fun AlignYourBodyElement(
        title: String, modifier: Modifier = Modifier
    ) {
        Column(
            modifier = modifier, horizontalAlignment = Alignment.CenterHorizontally
        ) {
            Image(
                painter = painterResource(id = R.mipmap.icon_launcher),
                contentDescription = null,
                contentScale = ContentScale.Crop,
                modifier = Modifier
                    .size(88.dp)
                    .clip(CircleShape)
            )
            Text(
                text = title,
                style = MaterialTheme.typography.h5,
                modifier = Modifier
                    .paddingFromBaseline(top = 24.dp, bottom = 8.dp)
                    .wrapContentWidth(),
                textAlign = TextAlign.Center
            )
        }
    }

    // header View
    @Composable
    fun SearchBar(
        modifier: Modifier = Modifier
    ) {
        TextField(value = "aaa",
            textStyle = TextStyle(fontSize = 16.sp),
            onValueChange = {},
            modifier = modifier
                .fillMaxWidth()
                .heightIn(min = 56.dp),
            // 这个是个文字前边的图标
            leadingIcon = {
                Icon(
                    imageVector = Icons.Default.Search,
                    contentDescription = "Search",
                    tint = Color.Blue
                )
            },
            colors = TextFieldDefaults.textFieldColors(
                textColor = MaterialTheme.colors.error,
                backgroundColor = MaterialTheme.colors.surface
            ),
            placeholder = {
                Text("123123123")
            })
    }

    // foot View
    data class Message(val author: String, val body: String)

    @Composable
    fun List(messages: List<Message>, modifier: Modifier) {
        LazyColumn(modifier = modifier) {
            items(messages) { msg ->
                MessageCard(msg)
            }
        }
    }

    @Composable
    fun MessageCard(msg: Message) {
        Surface(
            shape = MaterialTheme.shapes.small, modifier = Modifier.padding(10.dp)
        ) {
            Row(modifier = Modifier.padding(8.dp)) {
                var isExpanded by remember { mutableStateOf(false) }

                Column {
                    Text(text = msg.author, color = if (isExpanded) Color.Red else Color.Blue)
                    Spacer(modifier = Modifier.height(4.dp))
                    Text(text = msg.body, maxLines = if (isExpanded) Int.MAX_VALUE else 1)
                }
                Spacer(modifier = Modifier.width(8.dp))
                Image(
                    painter = painterResource(R.mipmap.ic_launcher),
                    contentDescription = "Contact profile picture",
                    modifier = Modifier
                        .size(40.dp)
                        .clip(CircleShape)
                        .clickable {
                            isExpanded = !isExpanded
                        },

                    )

            }
        }
    }


    @Composable
    fun TitleSection(title: String = "", content: @Composable () -> Unit) {
        Column(modifier = Modifier.background(color = Color.White)) {
            Text(text = title)
            content()
        }
    }
}